<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head th:include="include::head"></head>
<body>
<div class="layui-fluid">
    <!--form表单-->
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-block">
                <input type="text" id="perName" name="perName" autocomplete="off" class="layui-input" lay-verify="required|perName" th:value="${permission.perName}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限标识</label>
            <div class="layui-input-block">
                <input type="text" name="perRoute" th:value="${permission.perRoute}" autocomplete="off" class="layui-input" lay-verify="required|perRoute">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <select name="type" id="type" lay-filter="filter">
                    <option value="">请选择类型...</option>
                    <th:block th:each="menutype : ${diy['menu_type']}">
                        <option th:value="${menutype.dictionaryRoute}" th:utext="${menutype.dictionaryName}"></option>
                    </th:block>>
                    <th:block th:each="menutype : ${diy['menu_button']}">
                        <option th:value="${menutype.dictionaryRoute}" th:utext="${menutype.dictionaryName}"></option>
                    </th:block>>
                </select>
            </div>
        </div>

        <div class="layui-form-item" >
            <label class="layui-form-label">父级菜单</label>
            <div class="layui-input-block">
                <th:block th:each="value:${permissionList}">
                    <button th:if="${value.perId == permission.parentId}" id="parentIds" type="button" class="layui-btn layui-btn-primary layui-btn-fluid" th:utext="${value.perName}" ></button>
                </th:block>
            </div>
        </div>
        <div class="layui-form-item" id="show-perIcon">
            <label class="layui-form-label">图标</label>
            <div class="layui-input-block">
                <input type="text" name="perIcon" th:value="${permission.perIcon}" id="iconPicker" lay-filter="iconPicker" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">链接</label>
            <div class="layui-input-block">
                <input type="text" name="perHref"  th:value="${permission.perHref}" lay-verify="required|perHref"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" name="stort" th:value="${permission.stort}" autocomplete="off" class="layui-input" >
            </div>
        </div>

        <div class="layui-form-item"  id="show-perClass">
            <label class="layui-form-label">样式</label>
            <div class="layui-input-block">
                    <input type="text" name="perClass" th:value="${permission.perClass}" autocomplete="off" class="layui-input" >
            </div>
        </div>


        <div class="layui-form-item"  id="show-eventType">
            <label class="layui-form-label">事件</label>
            <div class="layui-input-block">
                <th:block th:each="value : ${diy['event_type']}">
                    <th:block th:if="${value.dictionaryRoute == permission.eventType}">
                        <input  type="radio" name="eventType" th:value="${value.dictionaryRoute}" th:title="${value.dictionaryName}"  checked  >
                    </th:block>
                    <th:block th:if="${value.dictionaryRoute != permission.eventType}">
                        <input  type="radio" name="eventType" th:value="${value.dictionaryRoute}" th:title="${value.dictionaryName}">
                    </th:block>
                </th:block>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <th:block th:each="value : ${diy['state_type']}">
                    <th:block th:if="${value.dictionaryRoute == permission.isState}" >
                        <input  type="radio" name="isState" th:value="${value.dictionaryRoute}" th:title="${value.dictionaryName}"  checked  >
                    </th:block>
                    <th:block th:if="${value.dictionaryRoute != permission.isState}" >
                        <input  type="radio" name="isState" th:value="${value.dictionaryRoute}" th:title="${value.dictionaryName}">
                    </th:block>
                </th:block>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remarks" th:utext="${permission.remarks}" class="layui-textarea"></textarea>
            </div>
        </div>

        <input name="perId" th:value="${permission.perId}" type="hidden">
        <th:block th:each="value:${permissionList}" th:if="${value.perId == permission.parentId}">
            <input id="parentId" name="parentId" type="hidden" th:value="${value.perId}" />
        </th:block>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<div id="alert-tree" style="display: none">
    <div class=""  id="tree">loding... ...</div>
</div>
<div th:include="include::onload"></div>
<script  th:inline="javascript">
    layui.config({
        base: '/js/layer/module/'//模块存放的目录
    }).use(['areal','form','iconPicker','verify'], function(){
        var form = layui.form,
            verify = layui.verify,
            iconPicker = layui.iconPicker,
            type=[[${permission.type}]],
            img=[[${permission.perIcon}]];

        verify.verification("",[[${permission}]]);
        menutype(type);
        form.render('select');
        iconPicker.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',
            // 是否开启搜索：true/false
            search: true
        });
        /**
         * 选中图标 （常用于更新时默认选中图标）
         * @param filter lay-filter
         * @param iconName 图标名称，自动识别fontClass/unicode
         */
        if($.common.isNotEmpty(img)){
            iconPicker.checkIcon('iconPicker', img);
        }
        // 监听提交
        form.on('submit(edit)', function(data) {
            $.achieve.post("/admin/system/permission/update",data.field,"",true);
            return false;
        });

        form.on('select(filter)', function(data){
            var types = data.value;
            if('menu'==types || 'menu_navigation'==types){
                menu();
            }else{
                button();
            }
        });

        $("#parentIds").on("click",function () {
            layer.open({
                type: 2,
                skin: 'layui-layer-lan',
                title: '菜单列表',
                fix: false,
                shadeClose: false,
                maxmin: true,
                area: ['420px', '340px'], //宽高
                content: '/admin/system/permission/level',
            });
        });
    });

    function menutype(type){
        $("#type").find("option[value='"+type+"']").attr("selected",true);
        if('menu'==type || 'menu_navigation'==type){
            menu();
        }else{
            button();
        }
    }

    function menu(){
        $("#perName").attr("lay-verify","required|perName");
        $("#show-perClass").hide();
        $("#show-eventType").hide();
        $("#show-perIcon").show();
    }
    function button(){
        $("#perName").attr("lay-verify","required");
        $("#show-perClass").show();
        $("#show-eventType").show();
        $("#show-perIcon").hide();
    }
</script>
</body>
</html>